<template>
  <div class="select">
    <div class="select_tips" @click="showClickSelectBox">{{ modelValue }}</div>
    <div class="select_box" v-show="isShow">
      <div class="select_box_fresh" v-if="isRresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="select_box_tips" v-if="list.length == 0">暂无数据</div>
          <template v-for="item in list" :key="item.drugID">
            <div class="select_box_item" @click="handleClickedMachine(item)">
              {{ item.drugName }}
            </div>
          </template>
        </van-list>
      </div>
      <div class="select_box_notfresh" v-else>
        <template v-for="item in list" :key="item">
          <div class="select_box_item" @click="handleClickedMachine(item)">
            {{ item.drugName }}
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import { Toast } from "vant";
export default {
  props: {
    modelValue: {
      type: String,
      required: true,
    },
    isRresh: {
      type: Boolean,
      default() {
        return true;
      },
    },
    list: {
      type: Array,
      required: true,
    },
    count: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
  },
  name: "selectBox",
  setup(props, { emit }) {
    const loading = ref(false);
    const finished = ref(false);
    const isShow = ref(false);
    const clickedItemTrue = ref(false); //判断当前组件有无选择药物
    const data = reactive({
      isShow: false,
    });
    const showClickSelectBox = () => {
      if (props.count != "" && props.count != props.name) {
        Toast("不可多开选择框喔");
        return;
      }
      if (props.count != "" && props.count == props.name) {
        Toast("请选择");
        return;
      }
      isShow.value = !isShow.value;
      emit("selectClicked", props.name);
    };
    const handleClickedMachine = (item) => {
      clickedItemTrue.value = true;
      emit("update:modelValue", item.drugName);
      isShow.value = false;
      emit("selectClicked", "");
    };
    const handleStopRefresh = () => {
      loading.value = false;
    };
    const handleFinishRefresh = () => {
      finished.value = true;
    };
    const onLoad = () => {
      emit("toRefreshmachineList");
    };

    return {
      ...toRefs(data),
      showClickSelectBox,
      isShow,
      handleClickedMachine,
      loading,
      finished,
      onLoad,
      handleStopRefresh,
      handleFinishRefresh,
    };
  },
};
</script>

<style lang="scss" scope>
.select {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  background-color: #fff;
  position: relative;
  &_box {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    min-height: 60px;
    position: absolute;
    background-color: #fff;
    z-index: 5;
    padding: 10px 0 0 0;
    max-height: 221px;
    overflow: scroll;
    top: 100%;
    &_tips {
      font-size: 14px;
      color: #ccc;
      text-align: center;
    }
    &_item {
      width: 100%;
      text-indent: 15px;
      min-height: 35px;
      white-space: pre-wrap;
      padding: 5px 0;
      font-size: 14px;
      border-bottom: 1px solid #ccc;
    }
  }
  &_tips {
    font-size: 14px;
    color: #ccc;
    text-indent: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
</style>
